<template>
    <div class="registerBox">
        <div class="iconSuccess">
            <div class="iconText">
                <div class="icon">
                    <i class="el-icon-check"></i>
                </div>
                <div class="text">预约挂号成功</div>
            </div>
            <div class="prompt">
                注：请您在 <span>{{date + ' ' + str + ' ' + time}}</span>
                前到达医院。入院前进行一次健康打卡，如果有陪同家属，陪同家属也需要登记信息，并进行一次健康打卡，疫情期间，感谢理解。
            </div>
        </div>
        <div class="regInfo">
            <div class="title">预约信息</div>
            <ul>
                <li class="clearfix">
                    <div>就诊科室：</div>
                    <div>{{dept + ' ' + name}}</div>
                </li>
                <li class="clearfix">
                    <div>就诊时间：</div>
                    <div>{{date + ' ' + str + ' ' + time}}</div>
                </li>
            </ul>
        </div>
        <div class="submit">
            <el-button type="primary" @click="goHome()">回到首页</el-button>
        </div>
        <alert v-model="show">
            <div class="alert">
                依据省市疫情防控指挥部对疫情防控工作的要求：所有预约患者不得提前超过15分钟进入医院，电子叫号候诊区等待患者间隔就坐并保持1米以上安全距离。
            </div>
        </alert>
    </div>
</template>

<script>
    import {Alert} from 'vux'

    export default {
        data() {
            return {
                dept: '',
                date: '',
                name: '',
                str: '',
                time: '',
                show: true
            }
        },
        mounted() {
            this.$emit('change', {
                style: {backgroundColor: '#f4f4f4'}
            })
            if (this.$route.query.dept) this.dept = decodeURI(this.$route.query.dept)
            if (this.$route.query.date) this.date = decodeURI(this.$route.query.date)
            if (this.$route.query.name) this.name = decodeURI(this.$route.query.name)
            if (this.$route.query.str) this.str = decodeURI(this.$route.query.str)
            if (this.$route.query.time) this.time = decodeURI(this.$route.query.time)
        },
        methods: {
            getData() {
                this.$http.get('').then(result => {
                    if (result.success) {
                    }
                })
            },
            goHome() {
                this.$router.replace('/home')
            }
        },
        computed: {},
        components: {
            Alert
        }
    }
</script>

<style scoped lang="less">
    .registerBox {
        width: 100%;
        height: 100%;
        background-color: #f4f4f4;

        .iconSuccess {
            width: 100%;
            /*min-height: 5.5rem;*/
            padding: .2rem;
            margin-bottom: .15rem;
            background-color: #fff;

            .iconText {
                padding: .4rem 0;

                .icon {
                    width: 2rem;
                    height: 2rem;
                    margin: 0 auto;
                    background-color: rgb(18, 218, 28);
                    text-align: center;
                    border-radius: 50%;

                    i {
                        line-height: 2rem;
                        color: #fff;
                        font-size: 1rem;
                    }
                }

                .text {
                    width: 2rem;
                    margin: .2rem auto;
                    text-align: center;
                    font-size: .32rem;
                }
            }

            .prompt {
                color: #f00;
            }
        }

        .regInfo {
            width: 100%;
            /*height: 2.4rem;*/
            padding: .2rem;
            background-color: #fff;

            .title {
                font-weight: bold;
                font-size: .32rem;
            }

            ul {

                li {
                    margin-top: .2rem;

                    div {
                        float: left;

                        &:nth-child(1) {
                            color: #999;
                        }
                    }
                }
            }
        }

        .submit {
            width: 80%;
            height: .88rem;
            margin: .5rem auto;

            .el-button {
                width: 100%;
                height: 100%;
            }
        }
    }

    .alert {
        color: #333;
    }
</style>
